<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>扇子</title>
		<style>

			body {
				background-color: skyblue;
			}
			
			.box {
				width: 240px;
				height: 400px;
				background-color: red;
				/*margin: 400px auto 0;*/
				margin-top: 200px;
				margin-left: auto;
				margin-right: auto;
				position: relative;
			}

			img {
				width: 200px;
				height: 360px;
				position: absolute;
				bottom: 0;
				/*left: 360px;*/
				border: 20px ridge pink;
				/*border-radius: 10px;*/
				
				/* 形变的基准点 */
				transform-origin: center bottom;
				transition: .5s;
			}

			div:hover>.img9 {
				transform: rotate(60deg);
			}

			div:hover>.img8 {
				transform: rotate(45deg);
			}

			div:hover>.img7 {
				transform: rotate(30deg);
			}
			
			div:hover>.img6 {
				transform: rotate(15deg);
			}

			div:hover>.img4 {
				transform: rotate(-15deg);
			}

			div:hover>.img3 {
				transform: rotate(-30deg);
			}

			div:hover>.img2 {
				transform: rotate(-45deg);
			}

			div:hover>.img1 {
				transform: rotate(-60deg);
			}

			

		</style>
	</head>
	<body>

		<div class="box">
			<img src="img/girl1.jpg" alt="" class="img1">
			<img src="img/girl2.jpg" alt="" class="img2">
			<img src="img/girl3.jpg" alt="" class="img3">
			<img src="img/girl4.jpg" alt="" class="img4">
			<img src="img/girl5.jpg" alt="" class="img5">
			<img src="img/girl6.jpg" alt="" class="img6">
			<img src="img/girl7.jpg" alt="" class="img7">
			<img src="img/girl8.jpg" alt="" class="img8">
			<img src="img/girl9.jpg" alt="" class="img9">
		</div>
		
	</body>
</html>